Оптимізація продуктивності JavaScript: Розділення коду проти Ледачого обчислення

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    

      Завантаження...
}>
        
      
    

У цьому прикладі OtherComponent завантажується лише тоді, коли він рендериться. Поки він завантажується, користувач бачить повідомлення "Завантаження...".

Інструменти для розділення коду

• Webpack: Популярний бандлер модулів, який підтримує різні методи розділення коду.
• Rollup: Ще один бандлер модулів, який зосереджений на створенні маленьких, ефективних пакетів.
• Parcel: Бандлер без конфігурації, який автоматично обробляє розділення коду.
• Vite: Інструмент збірки, який використовує нативні ES-модулі для швидкої розробки та оптимізованих виробничих збірок.

Ледаче обчислення: Відкладання обчислень

Що таке ледаче обчислення?

Ледаче обчислення (lazy evaluation), також відоме як відкладене обчислення, – це техніка програмування, за якою обчислення виразу відкладається до тих пір, поки його значення дійсно не знадобиться. Іншими словами, обчислення виконуються лише тоді, коли їх результати потрібні, а не обчислюються одразу.

Уявіть, що ви готуєте багатостравову їжу. Ви б не готували кожну страву одразу. Натомість, ви б готували кожну страву лише тоді, коли настане час її подавати. Ледаче обчислення працює подібним чином, виконуючи обчислення лише тоді, коли потрібні їхні результати.

Як працює ледаче обчислення

У JavaScript ледаче обчислення можна реалізувати за допомогою різних технік:

• Функції: Обгортання виразу у функцію дозволяє відкласти його обчислення до виклику функції.
• Генератори: Генератори надають спосіб створення ітераторів, які генерують значення за вимогою.
• Методи запам'ятовування (Memoization): Методи запам'ятовування передбачають кешування результатів дорогих викликів функцій та повернення кешованого результату, коли виникають ті самі вхідні дані.
• Проксі (Proxies): Проксі можна використовувати для перехоплення доступу до властивостей та відкладання обчислення значень властивостей до їх фактичного доступу.

Переваги ледачого обчислення

• Покращена продуктивність: Відкладаючи непотрібні обчислення, ледаче обчислення може значно покращити продуктивність, особливо при роботі з великими наборами даних або складними обчисленнями.
• Зменшене використання пам'яті: Ледаче обчислення може зменшити використання пам'яті, уникаючи створення проміжних значень, які не потрібні одразу.
• Підвищена чутливість: Уникаючи непотрібних обчислень під час початкового завантаження, ледаче обчислення може збільшити чутливість програми.
• Нескінченні структури даних: Ледаче обчислення дозволяє працювати з нескінченними структурами даних, такими як нескінченні списки або потоки, обчислюючи необхідні елементи лише за вимогою.

Приклад: Ледаче завантаження зображень

Поширеним випадком використання ледачого обчислення є ледаче завантаження зображень. Замість завантаження всіх зображень на сторінці одразу, ви можете відкласти завантаження зображень, які невидимі у початковій області перегляду. Це може значно покращити час початкового завантаження сторінки та зменшити споживання пропускної здатності мережі.

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  images.forEach((img) => {
    observer.observe(img);
  });
}

document.addEventListener('DOMContentLoaded', lazyLoadImages);

Цей приклад використовує API IntersectionObserver для виявлення, коли зображення потрапляє в область перегляду. Коли зображення стає видимим, його атрибут src встановлюється на значення його атрибута data-src, що спричиняє завантаження зображення. Потім спостерігач припиняє спостерігати за зображенням, щоб запобігти його повторному завантаженню.

Приклад: Запам'ятовування (Memoization)

Запам'ятовування можна використовувати для оптимізації дорогих викликів функцій. Ось приклад:

function memoize(func) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    const result = func(...args);
    cache[key] = result;
    return result;
  };
}

function expensiveCalculation(n) {
  // Імітація тривалого обчислення
  for (let i = 0; i < 100000000; i++) {
    // Щось робити
  }
  return n * 2;
}

const memoizedCalculation = memoize(expensiveCalculation);

console.time('Перший виклик');
console.log(memoizedCalculation(5)); // Перший виклик - займає час
console.timeEnd('Перший виклик');

console.time('Другий виклик');
console.log(memoizedCalculation(5)); // Другий виклик - повертає кешоване значення миттєво
console.timeEnd('Другий виклик');

У цьому прикладі функція memoize приймає функцію як вхідні дані та повертає запам'ятовану версію цієї функції. Запам'ятована функція кешує результати попередніх викликів, так що подальші виклики з тими самими аргументами можуть повернути кешований результат без повторного виконання оригінальної функції.

Розділення коду проти Ледачого обчислення: Ключові відмінності

Хоча розділення коду та ледаче обчислення є потужними методами оптимізації, вони вирішують різні аспекти продуктивності:

• Розділення коду: Зосереджується на зменшенні початкового розміру пакета шляхом поділу коду на менші частини та їх завантаження за вимогою. Він переважно використовується для покращення початкового часу завантаження сторінки.
• Ледаче обчислення: Зосереджується на відкладанні обчислення значень до тих пір, поки вони дійсно не знадобляться. Він переважно використовується для покращення продуктивності при роботі з дорогими обчисленнями або великими наборами даних.

По суті, розділення коду зменшує обсяг коду, який потрібно завантажити одразу, тоді як ледаче обчислення зменшує обсяг обчислень, які потрібно виконати одразу.

Коли використовувати розділення коду проти ледачого обчислення

Розділення коду

• Великі додатки: Використовуйте розділення коду для додатків з великим обсягом коду JavaScript, особливо тих, що мають кілька маршрутів або функцій.
• Покращення початкового часу завантаження: Використовуйте розділення коду для покращення початкового часу завантаження сторінки та зменшення часу до інтерактивності.
• Зменшення пропускної здатності мережі: Використовуйте розділення коду для зменшення обсягу даних, які потрібно передати через мережу.

Ледаче обчислення

• Дорогі обчислення: Використовуйте ледаче обчислення для функцій, які виконують дорогі обчислення або отримують доступ до великих наборів даних.
• Покращення чутливості: Використовуйте ледаче обчислення для покращення чутливості програми, відкладаючи непотрібні обчислення під час початкового завантаження.
• Нескінченні структури даних: Використовуйте ледаче обчислення при роботі з нескінченними структурами даних, такими як нескінченні списки або потоки.
• Ледаче завантаження медіа: Реалізуйте ледаче завантаження для зображень, відео та інших медіа-ресурсів для покращення часу завантаження сторінки.

Поєднання розділення коду та ледачого обчислення

У багатьох випадках розділення коду та ледаче обчислення можна комбінувати для досягнення ще більшого приросту продуктивності. Наприклад, ви можете використовувати розділення коду для поділу програми на менші пакети, а потім використовувати ледаче обчислення для відкладання обчислення значень у межах цих пакетів.

Розглянемо додаток електронної комерції. Ви могли б використовувати розділення коду для поділу додатку на окремі пакети для сторінки зі списком товарів, сторінки з деталями товару та сторінки оформлення замовлення. Потім, на сторінці деталей товару, ви могли б використовувати ледаче обчислення, щоб відкласти завантаження зображень або обчислення рекомендацій товарів до тих пір, поки вони фактично не знадобляться.

Поза розділенням коду та ледачим обчисленням: Додаткові методи оптимізації

Хоча розділення коду та ледаче обчислення є потужними методами, вони є лише двома частинами головоломки, коли йдеться про оптимізацію продуктивності JavaScript. Ось кілька додаткових методів, які ви можете використовувати для подальшого покращення продуктивності:

• Мініфікація: Видаліть непотрібні символи (наприклад, пробіли, коментарі) з вашого коду, щоб зменшити його розмір.
• Стиснення: Стисніть ваш код за допомогою таких інструментів, як Gzip або Brotli, щоб ще більше зменшити його розмір.
• Кешування: Використовуйте кешування браузера та CDN-кешування для зменшення кількості запитів до вашого сервера.
• Tree Shaking: Видаліть невикористовуваний код з ваших пакетів, щоб зменшити їх розмір.
• Оптимізація зображень: Оптимізуйте зображення, стискаючи їх, змінюючи розмір відповідно до потрібних вимірів та використовуючи сучасні формати зображень, такі як WebP.
• Debouncing та Throttling: Контролюйте швидкість виконання обробників подій, щоб запобігти проблемам з продуктивністю.
• Ефективна маніпуляція DOM: Мінімізуйте маніпуляції DOM та використовуйте ефективні техніки маніпуляції DOM.
• Web Workers: Розвантажуйте обчислювально інтенсивні завдання на веб-працівників, щоб запобігти їх блокуванню основного потоку.

Висновок

Оптимізація продуктивності JavaScript є ключовим аспектом забезпечення позитивного користувацького досвіду та досягнення бізнес-цілей. Розділення коду та ледаче обчислення – це два потужні методи, які можуть значно покращити продуктивність, зменшуючи початковий час завантаження, зменшуючи споживання пропускної здатності мережі та відкладаючи непотрібні обчислення. Розуміючи, як працюють ці методи та коли їх використовувати, ви можете створювати швидші, більш чутливі та приємніші веб-додатки.

Пам'ятайте про специфічні вимоги вашого додатку та використовуйте методи, які найкраще відповідають вашим потребам. Постійно відстежуйте продуктивність свого додатка та вдосконалюйте свої стратегії оптимізації, щоб забезпечити найкращий можливий користувацький досвід. Використовуйте потужність розділення коду та ледачого обчислення для створення веб-додатків, які не лише багатофункціональні, але й продуктивні та приємні у використанні по всьому світу.

Додаткові ресурси для навчання

• Документація Webpack: https://webpack.js.org/
• Документація Rollup: https://rollupjs.org/guide/en/
• Документація Vite: https://vitejs.dev/
• MDN Web Docs - API Intersection Observer: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• Google Developers - Оптимізація виконання JavaScript: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/